<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		
		
	</body>
	
	<script>
		
		/**
		 * 
		 * @param {String} path: 模块所在的全路径
		 * @param {Document} parent：模块加载的位置
		 */
		function loader(path, parent){
			this.path;
			this.parent;
		}
		
		
		loader.prototype.load = function(path, parent){
			this.path = path;
			this.parent = parent;
			
			this.init();
		}
		
		
		loader.prototype.init = function(){
			// 解析模块
			
			this.getSoruce("html");
			this.getSoruce("css");
			this.getSoruce("js");
			
		}
		
		/**
		 * 获取资源
		 * @param {string} type: 获取的类型，可选值 html | css | js
		 */
		loader.prototype.getSoruce = function(type){
			var self = this;
			var xhr = new XMLHttpRequest();
			xhr.timeout = 16000;
			xhr.responseType = "text";
			xhr.open('GET', this.path + "/index." + type, true);
			xhr.onload = function(){
				if(this.status == 200||this.status == 304){
			        var txt = this.responseText;
			        if (type == "html") {
//			        	console.log(txt);
			        	self.parseHtml(txt);
			        } else if (type == "css") {
//			        	console.log(txt);
			        } else if (type == "js") {
//			        	console.log(txt);
			        }
			    }
			}
			xhr.send();
		}
		
		// 解析html
		loader.prototype.parseHtml = function(txt){
//			console.log(txt);
			
			var index = txt.indexOf("<html>");
			console.log(index);
			
		}
		
		// 解析css
		loader.prototype.parseCss = function(txt){
			
		}
		
		// 解析js
		loader.prototype.parseJs = function(txt){
			
		}
		
		
		var l = new loader();
		
		l.load("models/page1", document.querySelector("body"));
		









		function get(path, mname, type, parent){
			var xhr = new XMLHttpRequest();
			xhr.timeout = 16000;
			xhr.responseType = "text";
			xhr.open('GET', path + "/" +mname + "/index." + type, true);
			xhr.onload = function(){
				if(this.status == 200||this.status == 304){
			        var txt = this.responseText;
			        if (type == "html") {
			        	parent.innerHTML = txt;
			        } else if (type == "css") {
			        	var style = document.createElement("style");
			        	style.setAttribute("id", name + type);
			        	style.innerHTML = txt;
			        	document.querySelector("head").appendChild(style);
			        } else if (type == "js") {
					    var script = document.createElement("script");
			        	script.setAttribute("id", name + type);
			        	script.innerHTML = txt;
			        	document.querySelector("head").appendChild(script);
			        }
			    }
			}
			xhr.send();
		}
		
//		get("models", "page1", "html", document.querySelector("body"));
//		get("models", "page1", "css");
//		get("models", "page1", "js");
		
		
	</script>
	
</html>
